import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  FlatList,
  Image,
  TouchableOpacity,
 
} from 'react-native';
import { FontAwesome } from '@expo/vector-icons'; // 用于图标
import useRem from '../rem/rem.js';
export default function DocumentList() {
  const [selectedTab, setSelectedTab] = useState('产品宣传');
  const {rem} = useRem();
  // 选项卡数据
  const tabs = ['产品宣传', '销售技巧', '疾病知识'];
  // 文件列表数据
  const fileList = [
    {
      id: '1',
      title: '疾病预防 (PDF)',
      size: '4.92 MB',
      uploadDate: '2020-02-03',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/u871.png', 
      views: 1477,
      downloads: 1477,
    },
    {
      id: '2',
      title: '疾病预防 (PDF)',
      size: '4.92 MB',
      uploadDate: '2020-02-03',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u242.png',
      views: 1477,
      downloads: 1477,
    },
    {
      id: '3',
      title: '疾病预防 (PDF)',
      size: '4.92 MB',
      uploadDate: '2020-02-03',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u244.png',
      views: 1477,
      downloads: 1477,
    },
    {
      id: '4',
      title: '疾病预防 (PDF)',
      size: '4.92 MB',
      uploadDate: '2020-02-03',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u246.png',
      views: 1477,
      downloads: 1477,
    },
    {
      id: '5',
      title: '疾病预防 (PDF)',
      size: '4.92 MB',
      uploadDate: '2020-02-03',
      imageUrl: 'https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u248.png',
      views: 1477,
      downloads: 1477,
    },
  ];
  // 渲染文件列表项
  const renderItem = ({ item }) => (
    <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#fff',
      width: rem(375),
      height: rem(133),
      marginBottom: rem(10),
      padding: rem(10),
 
    }}>
      <Image source={{ uri: item.imageUrl }} style={{
        width: rem(120),
        height: rem(90),
        borderRadius: rem(4),
        marginRight: rem(10),
      }} />
      <View style={{
        flex: 1,
     
        marginLeft: rem(10),
        // justifyContent: 'space-around',
      }}>
        <Text style={{
          fontSize: rem(14),
          height: rem(19),
          marginTop: rem(20),
          marginBottom: rem(8),
        }}>{item.title}</Text>
        <Text style={{
          fontSize: rem(12),
          height: rem(16),
          color: '#666',
          marginBottom: rem(8),
        }}>文件大小：{item.size}</Text>
        <Text style={{
          fontSize: rem(12),
          height: rem(16),
          color: '#666',
          marginBottom: rem(8),
        }}>上传时间：{item.uploadDate}</Text>
        <View style={{
          flexDirection: 'row',
          // marginTop: rem(10),
          marginBottom: rem(10),
          alignItems: 'center',
        }}>
          <FontAwesome name="eye" size={14} color="#888" />
          <Text style={{
            marginLeft: rem(5),
            marginRight: rem(15),
            fontSize: rem(12),
            height: rem(16),
            color: '#888',
          }}>{item.views}</Text>
          <FontAwesome name="cloud-download" size={20} color="#888" style={{
            marginLeft: rem(45),
          }} />
          <Text style={{
            marginLeft: rem(5),
            marginRight: rem(15),
            height: rem(16),
            fontSize: rem(12),
            color: '#888',
          }}>{item.downloads}</Text>
        </View>
      </View>
    </View>
  );

  return (
    <View style={{
      flex: 1,
      backgroundColor: '#f5f5f5',
    }}>
       <Text style={{
        width: rem(375),
        height: rem(44),
        backgroundColor: '#ffffff',
        borderBottomColor: '#e5e5e5',
        borderBottomWidth: rem(2),
        lineHeight: rem(44),
        paddingLeft: rem(10),
        fontSize: rem(16),
      }}>学习资料</Text>
      {/* 搜索框 */}
      <View style={{ backgroundColor: '#fff',alignItems: 'center',width: rem(375), height: rem(45), padding: rem(10),}}>
      <View style={{
        backgroundColor: '#fff',
        flexDirection: 'row',
        width:rem(335),
        height: rem(33),
        borderRadius: rem(20),
        borderWidth: rem(1),
        borderStyle: 'solid',
        borderColor:'black',
        opacity: 0.4,
        alignItems: 'center',
        padding: rem(10),
      }}>
        
        <FontAwesome name="search" size={25} color="#999999"  />
        <TextInput
          placeholder="请输入关键字"
          style={{
            width:rem(263),
            height: rem(25),
            marginLeft: rem(10),
            borderRadius: rem(20),
            backgroundColor: '#fff',
            // paddingHorizontal: rem(15),
            fontSize: rem(14),
            
          }}
          placeholderTextColor="#aaa"
        />
      </View>
      </View>
      {/* 选项卡 */}
      <View style={{
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#fff',
        width: rem(374),
        height: rem(44),
        borderBottomWidth: rem(1),
        borderBottomColor: '#eee',
      }}>
        {tabs.map((tab) => (
          <TouchableOpacity
            key={tab}
            style={{
              flex: 1,
             
              alignItems: 'center',
              paddingVertical: rem(10),
            }}
            onPress={() => setSelectedTab(tab)}
          >
            <Text style={[{
              fontSize: rem(16),
              
              color: '#888',
            }, selectedTab === tab && {
              color: '#007BFF',
            
            }]}>
              {tab}
            </Text>
            {selectedTab === tab && <View style={{
              width: rem(88),
              height: rem(2),
              backgroundColor: '#007BFF',
              marginTop: rem(5),
            }} />}
          </TouchableOpacity>
        ))}
      </View>

      {/* 文件列表 */}
      <FlatList
        data={fileList}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{
          flex: 1,
         
          backgroundColor: '#f5f5f5',
        }}
      />
    </View>
  );
}


